import TMap from "TMap";
import router from '../router';

export function mapInit(geometriesList) {
    const center = new TMap.LatLng(40.232111246852384, 116.12693299267576); //设置中心点坐标
    //初始化地图
    const map = new TMap.Map(document.getElementById("container"), {
        center: center,
    });

    //创建并初始化MultiMarker
    let markerLayer = null; // eslint-disable-line no-unused-vars
    markerLayer = new TMap.MultiMarker({
        map: map, //指定地图容器
        //样式定义
        styles: {
            //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
            myStyle: new TMap.MarkerStyle({
                width: 25, // 点标记样式宽度（像素）
                height: 35, // 点标记样式高度（像素）
                src:
                    "", //图片路径
                //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                anchor: { x: 16, y: 32 },
            }),
        },
        //点标记数据数组
        geometries: [
            {
                id: "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                styleId: "myStyle", //指定样式id
                position: new TMap.LatLng(40.232111246852384, 116.12693299267576), //点标记坐标位置
                properties: {
                    //自定义属性
                    title: "marker1",
                },
            },
            ...geometriesList
        ],
    });
    //初始化infoWindow
    var infoWindow = new TMap.InfoWindow({
        map: map,
        position: new TMap.LatLng(39.984104, 116.307503),
        offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素
    });
    infoWindow.close();//初始关闭信息窗关闭
    //监听标注点击事件
    markerLayer.on("click", function (evt) {
        //设置infoWindow
        infoWindow.open(); //打开信息窗
        // console.log(evt);
        infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
        if(evt.geometry.id === '1') {
            infoWindow.setContent('您当前位置');//设置信息窗内容
        } else {
            infoWindow.setContent(`可用充电桩${evt.geometry.available_quantity.toString()}<span class="open_zd_xq">点击进入站点详情</span>`);
            document.querySelector('.open_zd_xq').onclick = function() {
                router.push({
                    path: '/siteinfo',
                    query: {
                        sId: evt.geometry.id
                    }
                });
            }
        }
    })
}